<template>
  <div class="post-page">
    <el-card class="post-header">
      <!--header吧信息-->
      <div class="bar-info">
        <!--吧头像-->
        <div style="cursor: pointer" @click="openBarPage">
          <el-image
            v-if="barInfo.avatar"
            style="width: 72px; height: 72px"
            :src="barAvatarUrl"
            fit="fill">
          </el-image>
        </div>
        <!--吧名-->
        <div style="margin-bottom: 10px;cursor: pointer; font-size: x-large" @click="openBarPage">{{
            barInfo.name
          }}
        </div>
        <!--吧动态-->
        <div class="dynamic">
          <span style="margin-right: 20px;"><i class="el-icon-user"></i>{{ barInfo.followNum }}</span>
          <span><i class="el-icon-tiezi"></i>{{ barInfo.postNum }}</span>
        </div>
      </div>
      <!--标题-->
      <div class="title">{{ postInfo.title }}</div>
    </el-card>
    <!--帖子内容-->
    <el-card class="post-content">
      <!--发帖内容-->
      <div class="main">
        <!--发帖用户信息-->
        <div class="main-user-info">
          <!--头像-->
          <el-avatar :src="avatarUrl" shape="square" :size="72"></el-avatar>
          <!--昵称-->
          <div>{{ postInfo.nickname }}</div>
        </div>
        <!--发帖内容-->
        <div class="main-content">
          <div class="main-content-text">
            {{ postInfo.content }}
          </div>
          <div style="margin-top: 10px;">
            <el-image
              v-for="item in mediaList"
              :key="item"
              :src="item"
              style="width: 512px;"
              fit="contain"
              :preview-src-list="mediaList"
            />
          </div>
        </div>
      </div>
      <!--回复-->
      <div>
        <reply-list :reply-list="replyList"></reply-list>
      </div>
    </el-card>
    <!--固定按钮-->
    <div class="fix-button">
      <el-card @click.native="dialogFormVisible=true"><i class="el-icon-huifu"/></el-card>
      <el-card @click.native="changeLike">
        <i v-if="isLike" class="el-icon-dianzan" style="color: red"/>
        <i v-else class="el-icon-dianzan"/>
      </el-card>
      <!--<el-card @click.native="backTop"><i class="el-icon-caret-top"/></el-card>-->
      <el-backtop :right="240" :bottom="100"></el-backtop>
    </div>
    <!--回复表单-->
    <el-dialog :visible.sync="dialogFormVisible" width="674px" :show-close="false" center>
      <!--上传信息-->
      <el-form label-position="left" :model="barInfo">
        <!--内容-->
        <el-form-item>
          <!--emoji-->
          <div style="font-size: 20px;text-align:center;" class="emoji">
            <span v-for="emoji in emojiList" :key="emoji" @click="reply.content+=emoji" style="cursor: default">
              {{ emoji }}
            </span>
          </div>
          <el-input type="textarea" :rows="4" v-model="reply.content" ref="content"></el-input>
        </el-form-item>
        <!--上传图片-->
        <!--<el-upload-->
        <!--  list-type="picture-card"-->
        <!--  ref="upload"-->
        <!--  accept="image/*"-->
        <!--  :limit="7"-->
        <!--  :action="actionUrl"-->
        <!--  :auto-upload="false"-->
        <!--  :data="reply"-->
        <!--  :on-success="onSuccess"-->
        <!--  :on-change="onChange"-->
        <!--&gt;-->
        <!--  <i class="el-icon-plus"></i>-->
        <!--</el-upload>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="replyPost">回 复</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPostReply, replyPost } from '@/api/reply'
import ReplyList from '@/components/ReplyList'
import { baseUrl } from '@/utils/const'
import { getBarInfo } from '@/api/bar'
import { getId } from '@/utils/auth'
import { changeLike, isLike } from '@/api/user_like_post'

export default {
  components: { ReplyList },
  data () {
    return {
      postInfo: {},
      replyList: [],
      barInfo: {},
      reply: {
        content: ''
      },
      isLike: '',
      fileList: [],
      dialogFormVisible: false,
      emojiList: ['☺️', '😆', '😅', '😭', '😋', '🤮', '🤗', '😱', '🤣', '😄', '😍', '🤡', '👿', '🙉', '👨🏻‍🦳', '❤️', '🙏🏻']
    }
  },
  computed: {
    mediaList () {
      if (!this.postInfo.media) {
        return []
      } else if (this.postInfo.media[0] === '#') {
        const arr = this.postInfo.media.split('#')
        arr.shift()
        return arr.map(item => {
          return baseUrl + item
        })
      } else {
        return [baseUrl + this.postInfo.media]
      }
    },
    barAvatarUrl () {
      return baseUrl + this.barInfo.avatar
    },
    avatarUrl () {
      return baseUrl + this.postInfo.avatar
    },
    // 图片上传地址
    actionUrl () {
      return baseUrl + 'replyWithImg'
    }
  },
  created () {
    this.postInfo = this.$route.query
    this.getReplyList()
    this.getBarInfo()
    this.judgeIsLike()
  },
  methods: {
    // 判断是否点赞
    async judgeIsLike () {
      const res = await isLike(getId(), this.postInfo.id)
      this.isLike = res.isLike
    },
    // 获取回复列表
    async getReplyList () {
      const res = await getPostReply(this.$route.query.id)
      this.replyList = res.replyList
    },
    // 获取吧信息
    async getBarInfo () {
      const res = await getBarInfo(this.$route.query.barId)
      this.barInfo = res.barInfo
    },
    // 回复帖子
    async replyPost () {
      this.reply.date = new Date()
      this.reply.userId = getId()
      this.reply.postId = this.postInfo.id
      this.dialogFormVisible = false
      let res
      if (this.fileList.length && this.fileList) {
        res = await this.$refs.upload.submit()
      } else {
        res = await replyPost(this.reply)
      }
      if (res.code === 200) {
        this.$message.success({
          duration: 1000,
          message: '回复成功,经验+3'
        })
      }
    },
    // 图片上传成功
    onSuccess () {
      this.$message.success({
        duration: 1000,
        message: '发布成功'
      })
    },
    // 切换图片时
    onChange (file, fileList) {
      this.fileList = fileList
    },
    // 进入贴吧
    openBarPage () {
      const routeData = this.$router.resolve({
        path: '/barPage',
        query: {
          id: this.$route.query.barId
        }
      })
      window.open(routeData.href)
    },
    // 点赞
    async changeLike () {
      const res = await changeLike(this.isLike, getId(), this.postInfo.id)
      if (res.code === 200) {
        if (this.isLike) {
          this.isLike = !this.isLike
        } else {
          this.isLike = !this.isLike
        }
      }
    },
    // 回到顶部
    backTop () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style scoped lang="less">
.post-page {
  width: 900px;
  margin: 0 auto;
  //border: 1px solid @borderBase;

  .post-header {
    background: url("../../assets/background/yunbanner.png");
  }

  .el-card {
    background-color: #eff6fc;
  }

  .bar-info {
    display: flex;
    align-items: center;
    padding: 10px;

    div {
      margin-right: 10px;
    }
  }

  .title {
    font-size: large;
    font-weight: bold;
    padding: 20px;
    border-top: 1px solid @borderBase;
  }

  .post-content {
    margin: 10px 0;

    .main {
      border-bottom: 1px solid @borderBase;
      padding: 20px 0;
      display: flex;

      .main-user-info {
        width: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        div {
          width: 150px;
          color: @menuColor;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .main-content {
        width: 650px;
      }
    }
  }

  .fix-button {
    position: fixed;
    right: 230px;
    bottom: 140px;

    .el-card {
      height: 40px;
      width: 40px;
      background-color: @white;
      border-radius: 50%;
      margin: 10px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;

      i {
        font-size: 20px;
      }
    }
  }

  .el-dialog__header {
    height: 0;
    padding: 0;
  }

  .emoji {
    ::selection {
      background: none;
    }
  }
}

</style>
